<template>
    <div class="Article_Title">
        <div class="Article_Title_a">
            <el-text tag="b">文章标题</el-text>
            <el-input class="Article_Title_input" v-model="input1" placeholder="请输入标题" clearable />
        </div>
        <div class="Article_Title_b">
            <el-text tag="b">文章首图</el-text>
            <el-input class="Article_Title_input" v-model="input2" placeholder="文章首图" clearable />
        </div>
    </div>
    <div class="Article_Title">
        <div class="Article_Title_a">
            <div><el-text tag="b">分类</el-text></div>
            <el-select-v2 class="Article_Title_input" v-model="value1" :options="TypeList.options" placeholder="分类"
                style="width: 100%;" size="large" allow-create filterable clearable />
        </div>
        <div class="Article_Title_b">
            <div><el-text tag="b">标签</el-text></div>
            <el-select-v2 class="Article_Title_input" v-model="value2" :options="TypeList.options1" style="width: 100%;"
                placeholder="标签" size="large" allow-create filterable clearable multiple :reserve-keyword="false" />
        </div>
    </div>

    <div style="height: 500px;margin-bottom: 30px;"><mavon-editor ref="md" @imgAdd="$imgAdd" @imgDel="$imgDel"
            v-model="content" style="height: 100%" /></div>

    <el-button type="primary" @click="aaa()">保存</el-button>
    <el-button type="primary" @click="uploadImg">图片保存</el-button>
</template>
<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue'
import { GetType, GetTag, addblog } from '@/http'
import { ElMessage } from 'element-plus'
import axios from 'axios'



const TypeList = reactive({
    options: [],
    options1: [],
})
onMounted(async () => {
    await Promise.all([GetTypes(), GetTags()])
})
async function GetTags() {
    const res = (await GetTag()).data.result
    TypeList.options1 = res.map((item: { tag_id: number, tag_name: string }) => ({
        value: item.tag_id,
        label: item.tag_name,
    }))
}
async function GetTypes() {
    const res = (await GetType()).data.result
    TypeList.options = res.map((item: { type_id: number, type_name: string }) => ({
        value: item.type_id,
        label: item.type_name,
    }))
}

let input1 = ref();
let input2 = ref();
let value1 = ref();
let value2 = ref();
let content = ref();

const imgFile = ref<Record<string, File>>({});

const $imgAdd = (pos: string, file: File) => {
    imgFile.value[pos] = file;
};

const $imgDel = (pos: string) => {
    delete imgFile.value[pos];
};
const md = ref<any>(null);
const uploadImg = () => {
    console.log(md.value.$img2Url)
    const formdata = new FormData();/*  */
    for (const img in imgFile.value) {
        formdata.append(img, imgFile.value[img]);
    }
    console.log("formdata:", formdata)
    axios({
        url: 'server url',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data' },
    }).then((res: any) => {
        /**
         * 例如：返回数据为 res = [[pos, url], [pos, url]...]
         * pos 为原图片标志（0）
         * url 为上传后图片的url地址
         */
        for (var img of res) {
            // $vm.$img2Url 详情见下方说明
            md.value.$img2Url(img[0], img[1]);
        }
    });
};
async function aaa() {
    if (!input1.value || !input2.value || !value1.value || !value2.value) {
        ElMessage({
            message: '请填写所有字段！',
            type: 'warning',
        })
        return // 如果有字段为空，则直接返回
    }
    const blog = {
        blog_title: input1.value,
        blog_content: content.value,
        user_id: 1,
        type_id: value1.value,
        blog_status: 1,
        create_time: new Date(),
        update_time: new Date(),
        cover_image: input2.value
    }
    var arr = value2.value
    const res = (await addblog(blog, arr))
    const data = res.data;
    if (data.isSuccess) {
        ElMessage({
            message: '保存成功!',
            type: 'success',
        })
        input1.value='',
        input2.value='',
        content.value='',
        value1.value='',
        value2.value=''
    }
    else {
        ElMessage.error('保存失败!')
    }
}
</script>
<style scoped>
.Article_Title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.Article_Title_a {
    width: 49.5%;
    height: 100px;
}

.Article_Title_b {
    width: 49.5%;
    height: 100px;
}

.Article_Title_input {
    margin-top: 15px;
    height: 40px;
}
</style>